<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns# article: http://ogp.me/ns/article#
" lang="zh_cn">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>推荐一款blazor界面开发库 | vitamind3 竹里馆</title>
<link href="../../assets/css/all-nocdn.css" rel="stylesheet" type="text/css">
<link href="../../assets/css/ipython.min.css" rel="stylesheet" type="text/css">
<link href="../../assets/css/nikola_ipython.css" rel="stylesheet" type="text/css">
<meta name="theme-color" content="#5670d4">
<meta name="generator" content="Nikola (getnikola.com)">
<link rel="alternate" type="application/rss+xml" title="RSS" hreflang="zh_cn" href="../../rss.xml">
<link rel="canonical" href="https://vitamind3.gitee.io/posts/tui-jian-yi-kuan-blazorjie-mian-kai-fa-ku/">
<!--[if lt IE 9]><script src="../../assets/js/html5.js"></script><![endif]--><meta name="author" content="vitamind3">
<link rel="prev" href="../bi-ji-ruan-jian-de-qi-nian-zhi-yang/" title="笔记软件的七年之痒" type="text/html">
<link rel="next" href="../obsidiancang-ku-mo-ban/" title="obsidian仓库模板" type="text/html">
<meta property="og:site_name" content="vitamind3 竹里馆">
<meta property="og:title" content="推荐一款blazor界面开发库">
<meta property="og:url" content="https://vitamind3.gitee.io/posts/tui-jian-yi-kuan-blazorjie-mian-kai-fa-ku/">
<meta property="og:description" content="asp.net 能基于 blazor 开发wasm应用已经有几年了，相应的界面库也有一些了。去掉意外的发现一个很少被人提到的UI库，就是 MudBlazor ，在几个小项目中已经用上，竟然意外的好用。例如我放到gitee上的项目 在线工具搜索  ，就是用 MudBlazor 开发的纯前端 blazor wasm 项目。作用是根据关键词找到对应的在线工具。
记一下自己使用后的体验：



官网 Mu">
<meta property="og:type" content="article">
<meta property="article:published_time" content="2022-01-28T22:55:15+08:00">
<meta property="article:tag" content="aspnet">
<meta property="article:tag" content="blazor">
</head>
<body>
<a href="#content" class="sr-only sr-only-focusable">跳到主内容</a>

<!-- Menubar -->

<nav class="navbar navbar-expand-md static-top mb-4
navbar-dark
bg-dark
"><div class="container">
<!-- This keeps the margins nice -->
        <a class="navbar-brand" href="../../">

            <span id="blog-title">vitamind3 竹里馆</span>
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-controls="bs-navbar" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="bs-navbar">
            <ul class="navbar-nav mr-auto">
<li class="nav-item">
<a href="../../pages/introduction" class="nav-link">欢迎</a>
                </li>
<li class="nav-item">
<a href="../../archive.html" class="nav-link">文章归档</a>
                </li>
<li class="nav-item">
<a href="../../categories/" class="nav-link">分类</a>
                </li>
<li class="nav-item">
<a href="../../rss.xml" class="nav-link">RSS 源</a>

                
            </li>
</ul>
<ul class="navbar-nav navbar-right"></ul>
</div>
<!-- /.navbar-collapse -->
    </div>
<!-- /.container -->
</nav><!-- End of Menubar --><div class="container" id="content" role="main">
    <div class="body-content">
        <!--Body content-->
        
        
        
<article class="post-text h-entry hentry postpage" itemscope="itemscope" itemtype="http://schema.org/Article"><header><h1 class="p-name entry-title" itemprop="headline name"><a href="." class="u-url">推荐一款blazor界面开发库</a></h1>

        <div class="metadata">
            <p class="byline author vcard p-author h-card"><span class="byline-name fn p-name" itemprop="author">
                    vitamind3
            </span></p>
            <p class="dateline">
            <a href="." rel="bookmark">
            <time class="published dt-published" datetime="2022-01-28T22:55:15+08:00" itemprop="datePublished" title="2022-01-28 22:55">2022-01-28 22:55</time></a>
            </p>
            

        </div>
        

    </header><div class="e-content entry-content" itemprop="articleBody text">
    <div>
<p>asp.net 能基于 blazor 开发wasm应用已经有几年了，相应的界面库也有一些了。去掉意外的发现一个很少被人提到的UI库，就是 MudBlazor ，在几个小项目中已经用上，竟然意外的好用。例如我放到gitee上的项目 <a href="https://vitamind3.gitee.io/crabtoolset">在线工具搜索</a>  ，就是用 MudBlazor 开发的纯前端 blazor wasm 项目。作用是根据关键词找到对应的在线工具。</p>
<p>记一下自己使用后的体验：</p>
<!-- TEASER_END -->

<ul>
<li>官网 <a href="https://mudblazor.com/">MudBlazor - Blazor Component Library</a> 提供的资源很丰富，文档 、示例、在线代码试验场（play ground）。</li>
<li>官网的所有的代码都能在对应的试验场在线测试效果。<a href="https://try.mudblazor.com/">TryMudBlazor - A playground for testing MudBlazor components in the browser</a>
</li>
<li>在这一年的使用过程中，官网和MudBlazor本身都在快速更新中。</li>
<li>控件非常丰富，如果是开发后台管理类应用，基本不需要再借助其他的JS库。</li>
<li>开源、MIT协议</li>
</ul>
<p><img alt="MudBlazor" src="../../images/image20220128224623.png"></p>
<p>另外，什么要用blazor，而不用JS做前端？因为开发体验更好。</p>
<ul>
<li>使用blazor不论是server, wasm哪种模式，都能在前后端使用C#，保证一致的开发感受。</li>
<li>前端后可以共享代码，例如 FluentValidation, 数据库的 DTO 等等。</li>
<li>如果是一个小项目，需要一个人同时撸前后端，用blazor效率真是高。</li>
</ul>
<p>做了2个视频介绍 MudBlazor：</p>
<iframe width="668px" height="400px" src="//player.bilibili.com/player.html?aid=938051754&amp;bvid=BV1qT4y1Y7eW&amp;cid=570986429&amp;page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

<iframe width="668px" height="400px" src="//player.bilibili.com/player.html?aid=938248395&amp;bvid=BV1oT4y1h7MP&amp;cid=575934243&amp;page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
</div>
    </div>
    <aside class="postpromonav"><nav><ul itemprop="keywords" class="tags">
<li><a class="tag p-category" href="../../categories/aspnet/" rel="tag">aspnet</a></li>
            <li><a class="tag p-category" href="../../categories/blazor/" rel="tag">blazor</a></li>
        </ul>
<ul class="pager hidden-print">
<li class="previous">
                <a href="../bi-ji-ruan-jian-de-qi-nian-zhi-yang/" rel="prev" title="笔记软件的七年之痒">上一篇文章</a>
            </li>
            <li class="next">
                <a href="../obsidiancang-ku-mo-ban/" rel="next" title="obsidian仓库模板">下一篇文章</a>
            </li>
        </ul></nav></aside></article><!--End of body content--><footer id="footer">
            Contents ©         <a href="https://vitamind3.gitee.io/">vitamind3</a> - Powered by         <a href="https://getnikola.com" rel="nofollow">Nikola</a>         
            
            
        </footer>
</div>
</div>


        <script src="../../assets/js/all-nocdn.js"></script><script>
    baguetteBox.run('div#content', {
        ignoreClass: 'islink',
        captions: function(element){var i=element.getElementsByTagName('img')[0];return i===undefined?'':i.alt;}});
    </script><script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?09027755f7478e129aec2cdd3acf9a4c";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
</body>
</html>
